<template>
  <div class="app-container flex column">
    <top-title :updateTime="true" :content="content"></top-title>
    <div class="content-wrap f1">
      <!-- 搜索部分 -->
      <div class="search-group" style="padding-left: 0">
        <div class="input-wrap">
          <div class="label">字典名称:</div>
          <div class="input-item">
            <j-input :maxLength="30" v-model="queryParam.dictName" placeholder="请输入字典名称" clearable></j-input>
          </div>
        </div>
        <div class="input-wrap">
          <div class="label">字典编号:</div>
          <div class="input-item">
            <j-input :maxLength="30" v-model="queryParam.dictCode" placeholder="请输入字典编号" clearable></j-input>
          </div>
        </div>

        <div class="btn-wrap">
          <a-button class="searchBtn" @click="searchQuery()" type="primary"> 搜索 </a-button>
          <a-button class="resetBtn" @click="searchReset()" type="primary"> 重置 </a-button>
        </div>
      </div>
      <!-- 按钮功能栏 -->
      <div class="table-operator" style="border-top: 5px; padding: 0 20px 16px 20px">
        <a-button @click="handleAdd" class="BtnStyle" type="primary" icon="plus">添加</a-button>
        <a-button type="primary" icon="download" class="BtnStyle" @click="handleExportXls('字典信息')">导出</a-button>
        <a-upload
          name="file"
          :showUploadList="false"
          :multiple="false"
          :headers="tokenHeader"
          accept=".xls,.xlsx,"
          :action="importExcelUrl"
          @change="handleImportExcel"
        >
          <a-button type="primary" class="BtnStyle" icon="import">导入</a-button>
        </a-upload>
        <a-button type="primary" class="BtnStyle" icon="sync" @click="refleshCache()">刷新缓存</a-button>
      </div>
      <!-- 表格 -->
      <a-table
        ref="table"
        rowKey="id"
        class="tableList"
        :loading="loading"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a class="operation dropdown-color" @click="handleEdit(record)">
            <a-icon type="edit" />
            编辑
          </a>

          <a class="operation dropdown-color" @click="editDictItem(record)"><a-icon type="setting" /> 字典配置</a>

          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
            <a class="operation dropdown-color">删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <dict-modal ref="modalForm" @ok="modalFormOk"></dict-modal>
    <dict-item-list ref="dictItemList"></dict-item-list>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import DictItemList from './DictItemList'
import DictModal from './modules/DictModal'
import topTitle from '@/components/topTitle'
import JInput from '@/components/jeecg/JInput'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'DictList',
  mixins: [JeecgListMixin],
  components: { topTitle, JInput, DictModal, DictItemList },
  data () {
    return {
      content: [['数据字典']],
      queryParam: {
        dictCode: '',
        dictName: '',
      },
      url: {
        list: '/sys/dict/page',
        delete: '/sys/dict/delete',
        exportXlsUrl: 'sys/dict/exportXls',
        refleshCache: '/sys/dict/refresh_cache',
        importExcelUrl: 'sys/dict/import_excel',
      },

      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 120,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '字典名称',
          align: 'center',
          ellipsis: true,
          dataIndex: 'dictName',
        },
        {
          title: '字典编号',
          align: 'center',
          ellipsis: true,
          dataIndex: 'dictCode',
        },
        {
          title: '描述',
          align: 'center',
          ellipsis: true,
          dataIndex: 'description',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    },
  },
  mounted () { },
  methods: {
    //编辑字典数据
    editDictItem (record) {
      this.$refs.dictItemList.edit(record)
    },
    refleshCache () {
      getAction(this.url.refleshCache)
        .then((res) => {
          this.$message.success('刷新缓存完成！')
        })
        .catch((e) => {
          this.$message.warn('刷新缓存失败！')
          console.log('刷新失败', e)
        })
    },
  },
  destroy () { }
}
</script>

<style scoped lang="less">
.app-container {
  padding-top: 0;
  .content-wrap {
    padding: 0 30px;
    overflow: auto;
  }
}
</style>
